<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <link href="css/main.css" type="text/css" rel="stylesheet">
</head>
<body style="background-color: #f7f7f7">
<div class="header">
    <div class="back" onclick="javascript:history.back(-1);">
        <span></span>
    </div>
    店铺详情
</div>
<div class="detial-content">
    <div class="top-img">
        <img src="img/avatar.jpg">
        <p>鸟巢</p>
    </div>
    <div class="detial-wrapper">
        <div class="detial-left">
            <h2>扫码充电</h2>
            <p>提供座充</p>
        </div>
        <div class="detial-right">
            <h2>扫码充电</h2>
            <p><i class="dot1"></i><span>提供座充</span> <i class="dot2"></i> <span class="other">可还0台</span></p>
        </div>
    </div>
    <ul class="list-wrapper">
        <li class="list-item location">
            <div class="item-content ">
                <h2>地址</h2>
                <p>西单老佛爷百货五层</p>
            </div>
            <div class="item-icon icon-location">
                <div></div>
                <p>117米</p>
            </div>
        </li>
        <li class="list-item phone">
            <div class="item-content ">
                <h2>联系电话</h2>
                <p>57508386</p>
            </div>
            <div class="item-icon icon-phone" id="show">
                <div></div>
            </div>
        </li>
        <li class="list-item datatime">
            <div class="item-content ">
                <h2>营业时间</h2>
                <p>09:00~21:50</p>
            </div>
        </li>
    </ul>
</div>
<div class="note-wrapper"><a class="bottom-note" onclick="window.location='help.html'">如何归还充电宝？</a></div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    $("document").ready(function()
    {
        //点击弹出浮层
        $("#show").click(function()
        {
            //清除之前的样式
            $("#fullScreen,#floatLayer").remove();
            $("body").append
            (
                //占据整个屏幕Div
                "<div id='fullScreen'></div>"+
                //浮层区
                "<div id='floatLayer'>" +
                "<a href='tel:13764567708' id='phoneon'>拨打号码</a>"+
                "<a href='wtai://wp/ap;13764567708;' id='phonesave'>保存至通讯录</a>"+
                "</div>"
            );
            //隐藏浮层
            $("#fullScreen").click(function()
            {
                $("#fullScreen,#floatLayer").remove();
            });
        });
    });
</script>
</html>